<template>
    <div id="orderdetail">
            <div class="navtop">
                <el-tabs value="first" @tab-click="handleClick" >
                    <el-tab-pane label="交易信息" name="first">
                    </el-tab-pane>
                    <el-tab-pane label="买家信息" name="second" >
                    </el-tab-pane>
                    <el-tab-pane label="物流信息" name="third">
                    </el-tab-pane>
                </el-tabs> 
            </div> 
<div class="form_wrap order_wrap" >
<el-form ref="form"  :model="goods" label-width="100px" >
            <div ref="form1">
                   <el-header>交易信息</el-header>
                    <el-row>
                      <el-col :span="12">
                        <div class="label_left">
                          订单号:<span>{{goods.number}}</span>
                        </div>
                      </el-col>
                     <el-col :span="12">
                          <div class="label_left">
                           支付账号:<span>{{goods.payNo}}</span>
                          </div>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="12"> 
                         <div class="label_left">
                           下单日期:<span>{{goods.createTime}}</span>
                          </div>
                      </el-col>     
                     <el-col :span="12"> 
                        <div class="label_left">
                           支付方式:<span>{{goods.paymentType}}</span>
                          </div>
                      </el-col>   
                    </el-row>
                    <el-row>
                        <el-col :span="24"><div class=" bg-purple-dark jiaoyi"></div></el-col>
                    </el-row>

                    <el-row class="caigouTop">
                        <el-col :span="12"> 
                          <div class="label_left">
                           商品名称:<span></span>
                          </div>
                      </el-col>     
                     <el-col :span="6"> 
                         <div class="label_left">
                           采购数量:
                          </div>
                      </el-col> 
                      <el-col :span="6"> 
                          <div class="label_left">
                           采购金额:
                          </div>
                      </el-col> 
                    </el-row>

                    <el-table :data="tableData"  Checkbox border style="width: 100%;margin-bottom:15px;" fit ref="multipleTable" :default-sort="{prop:'sort_num'}" @cell-mouse-enter="handleSelectCell">
                      <el-table-column prop="sort_num" width="50" label="序号" type="index" :rules="[{ required: true, message: '请上传图片', trigger: 'blur' }]">
                      </el-table-column>
                      <el-table-column prop="name" label="款式名称" width="200">
                               <template slot-scope="scope">
                                 <span>{{scope.row.name}}</span>
                                </template>
                      </el-table-column>
                        <el-table-column prop="number" label="款式型号" width="200">
                               <template slot-scope="scope">
                                 <span>{{scope.row.number}}</span>
                                </template>
                      </el-table-column>
                      <el-table-column prop="price" label="单价(元)">
                        <template slot-scope="scope">
                                 <span>{{scope.row.price}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="stock" label="采购数">
                        <template slot-scope="scope">
                                 <span>{{scope.row.shopNumber}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="stockUnit" label="量">
                        <template slot-scope="scope">
                                 <span>{{scope.row.stockUnit }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="minOrders" label="合计金额" width="100">
                        <template slot-scope="scope">
                                 <span>{{scope.row.totalPrice}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="dealUnit" label="生产日期">
                        <template slot-scope="scope">
                                 <span>{{scope.row.productTime}}</span>
                        </template>
                      </el-table-column>
                    </el-table>
          
            </div>     
            <div  ref="form2" style="margin-top:20px">
                    <el-container>
                    <el-header>买家信息</el-header>
                     <!-- :gutter="20" -->
                      <el-row>
                        <el-col :span="12">
                           <div class="label_left">
                           交货省市区:<span>{{goods.provinceName}}-{{goods.cityName}}-{{goods.areaName}}</span>
                          </div>
                        </el-col>
                      <el-col :span="12">
                         <div class="label_left">
                           具体地址:<span>{{goods.address}}</span>
                          </div>
                        </el-col>
                        <el-col :span="12">
                           <div class="label_left">
                           收货人:<span>{{goods.consignee}}</span>
                          </div>
                        </el-col>
                        <el-col :span="12">
                           <div class="label_left">
                           买家名称:<span>{{goods.name}}</span>
                          </div>
                        </el-col>
                        <el-col :span="12">
                           <div class="label_left">
                           公司名称:<span>{{goods.consignee}}</span>
                          </div>
                        </el-col>
                        <el-col :span="12">
                           <div class="label_left">
                          下单人:<span>{{goods.userName}}</span>
                          </div>
                        </el-col>
                        <el-col :span="12">
                           <div class="label_left">
                           下单人电话:<span>{{goods.phone}}</span>
                          </div>
                        </el-col>
                        <el-col :span="12">
                           <div class="label_left">
                           买家备注:<span>{{goods.remark}}</span>
                          </div>
                        </el-col>
                    </el-row>
                    </el-container>
            </div>
          <div  ref="form3" class="form3">  
            <el-container>
                <el-header>物流信息</el-header>
                <el-row>
                  <el-col :span="24">
                      <div class="label_left">
                           物流公司:<span>{{goods.logisticsCompany}}</span>
                      </div>
                  </el-col>
                  <el-col :span="24">
                      <div class="label_left">
                           快递单号:<span>{{goods.logisticsNumber}}</span>
                      </div>
                  </el-col>
                  <!-- <el-col :span="24">
                      <div class="label_left">
                           快递员:<span>{{goods.remark}}</span>
                      </div>
                  </el-col>
                  <el-col :span="24">
                      <div class="label_left">
                          快递员电话:<span>{{goods.remark}}</span>
                      </div>
                  </el-col> -->
                  
                </el-row>
            </el-container> 
          </div>  
       
</el-form>
          </div>


          <div class="order_footer">
                      <el-row :gutter="20" class="order_status">
                        <el-col :span="6"> 
                            <div class="order">订单总额：<span>￥{{goods.totalPrice}}</span></div>  
                        </el-col>     
                        <el-col :span="6"> 
                          <div class="order">订单总款式：<span>{{goods.style}}款</span></div>  
                        </el-col>
                        <el-col :span="6"> 
                           <div class="order">订单总数量：<span>{{goods.count}}件</span></div>  
                        </el-col> 
                        <el-col :span="6"> 
                              <div class="order">付款状态：<span>{{goods.paymentTime}}</span></div>  
                        </el-col>    
                    </el-row>
          </div>

          <div class="order_header">
                            订单状态：<span>{{goods.state}}</span>
                            <el-button v-if="goods.state=='待发货'" type="primary"  @click="dialogField()" >去发货
                            </el-button>
          </div>

       <el-dialog title="填写信息" :visible.sync="dialogFieldVisible" width="500px">
          <el-form :model="attribute" label-width="100px" ref="form">
            <el-form-item label="物流公司" prop="logisticsCompany" >
              <el-input v-model="logisticsCompany" placeholder="填写物流公司"></el-input>
            </el-form-item>
            <el-form-item label="订单号" prop="logisticsNumber" >
              <el-input v-model="logisticsNumber" placeholder="填写订单号"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFieldVisible = false">取 消</el-button>
            <el-button type="primary" @click="deliverForm('form')">确 定</el-button>
          </div>
			</el-dialog>

</div>
</template>

<script>
import pictureview from "@/components/my-components/pictureview/index";
import Qs from 'qs'

export default {
  data: function() {
    return {
      tabType: 0,
      scrollHeight: 0,
      activeName: "1",
      goods:[],
      tableData:[],
      dialogFieldVisible:false,
      id:"",
      logisticsCompany:'',
      logisticsNumber:''
    };
  },
  components: {
    pictureview,

  },
  methods: {
   
    isNull(obj) {
      for (var key in obj) {
        return false;
      }
      return true;
    },
    handleImgSuccess(picture) {
      this.$set(this.goods, "thumbnail", picture.id);
    },
    handleImgSuccessTwo(picture) {
      this.$set(this.goods, "masterGraphOne", picture.id);
    },
    handleImgSuccessThree(picture) {
      this.$set(this.goods, "masterGraphTwo", picture.id);
    },
    handleImgSuccessTable(picture) {
      this.$set(this.tableData[picture.index], "thumbnail", picture.id);
    },
    handleImgSuccessCanshu(picture) {
      this.$set(this.comparetableData[picture.index], "image", picture.id);
    },
    handleDelete(index, row) {
      let goods = row;
      goods.active = true;
      for (let o in this.tableData) {
        if (this.tableData[o].id == row.id) {
          this.tableData.splice(o, 1);
          break;
        }
      }
      this.saveGoods(goods);
    },
    handleSort(index, row) {
      this.$set(this.tableData, 0, this.tableData[0]);
      this.saveGoods(row);
    },
    handleSelectCell(row, column, cell, event) {
      this.selectedGoods = row;
    },
    addListGroup(index, row) {
      //交易信息  增加款式
      // console.log(index,row)
      if (row != null) {
        this.addtableList = row;
      } else {
        this.addtableList = {};
      }
      console.log(JSON.stringify(this.addtableList));
     this.tableData.push(this.addtableList);
    },
    addCompareGroup() {
      //参数对标信息增加
      let compareGroup = {};
      // compareGroup.name = "";
      // parameterGroup.parameterGroup = [];
      this.comparetableData.push(compareGroup);
      console.log(this.tableData);
    },
    removeParameterGroup(index) {
      console.log("index" + index);
      this.parameterValue.splice(index, 1);
    },
    jiben(tab, event) {
      console.log(tab, event);
      alert(123);
    },
    handleScroll(element) {
      var content = document.querySelector(".content");
      // var scrollTop=content.pageYOffset||content.scrollTop;
      this.scrollHeight = element.offsetTop;
      console.log(this.scrollHeight);
      var _this = this;
      setTimeout(() => {
        content.scrollTo({ behavior: "smooth", top: _this.scrollHeight - 104 });
      }, 0);
      // console.log(scrollTop)
    },
    handleClick(tab, e) {
      //点击选项卡
      this.tabType = tab.index;
      var _val = tab.index; //
      this.getWaterDetails(_val);
    },
    getWaterDetails(val) {
        //tab0
      if (val == 0) {
        var ele1 = this.$refs.form1;
        this.handleScroll(ele1);
      }
      if (val == 1) {
        //tab1
        var ele2 = this.$refs.form2;
        this.handleScroll(ele2);
      }
      if (val == 2) {
        var ele3 = this.$refs.form3;
        this.handleScroll(ele3);
      }
      if (val == 3) {
        var ele4 = this.$refs.form4;
        this.handleScroll(ele4);
      }
      if (val == 4) {
        var ele5 = this.$refs.form5;
        this.handleScroll(ele5);
      }
    },
    batchRemove(index, row) {
      var ids = this.tableData.map(item => item.id).toString();
      let arrids = ids.split(",");
      this.$confirm("确认删除该项吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          console.log(index);
          if(this.$route.query.id){
                  this.$axios.post( '/one9-web/goods/deleteStyle?id='+ arrids[index]).then((res) => {
                    this.$message({
                      message: "删除成功",
                      type: "success"
                    });
                  });
            this.tableData.splice(index, 1);

          }else{
            this.tableData.splice(index, 1);
               this.$message({
                            message: "删除成功",
                            type: "success"
                          });
                }
            
        })
        .catch(() => {});
    },
    basicInfo() {
      this.$axios.get("/one9-web/order/findOneOrder?id=" + this.$route.query.id)
        .then(res => {
          if (res.code = "OK") {
              this.goods=res.data[0];
              this.tableData = res.data[0].orderDetail;
          } })
    },
    styleInfo(){
        //  this.$axios.get("one9-web/order/findOrderDetail?id=" + this.$route.query.id)
        // .then(res => {
        //   if (res.code = "OK") {
        //     this.tableData = res.data;
        //   }
        // });
    },
    back(){
      this.$router.go(-1);
    },
    
			dialogField(index){
				this.dialogFieldVisible=true;
				this.id=this.$route.query.id;
      },
      deliverForm(){
				const Qs = require("qs");
				this.$axios.post('/one9-web/order/deliverGoods',Qs.stringify({"logisticsCompany":this.logisticsCompany,'logisticsNumber':this.logisticsNumber,id:this.id})).then(res=>{
					if(res.code='OK'){

					}
				})
			},
    
  },
  watch: {},
  computed: {
       bianji(){
         if( this.$route.query.id){
              return  true
         }else{
              return  false
         }
      }
  },
  created() {
        if (this.$route.query.id) {
            this.basicInfo();
            // this.styleInfo();
            // this.parameterInfo();
            // this.ReferenceInfo();
        }else{
        };
  },
  mounted() {
  },
  destoryed() {
  }
};
</script>
<style>
.attribute_group {
  height: 30px;
}
.attribute_group .attribute_title {
  text-align: right;
}
.el-tag {
  margin-right: 5px;
}
.specificationsImg .el-upload,
.specificationsImg .el-upload .avatar-uploader-icon {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
.specifications_title {
  height: 30px;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 50px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.content .el-header {
  height: 30px !important;
  line-height: 30px;
  margin-bottom: 10px;
}
.content .el-header {
  height: 30px !important;
  line-height: 30px;
  margin-bottom: 10px;
}
label.el-form-item__label {
  line-height: 30px;
}
.jiaoyi {
  text-align: center;
  color: #909399;
  line-height: 40px;
  font-size: 20px;
  border-bottom: 1px solid #909399;
}
.content .el-col-12 {
  width: 50%;
  color: #909399;
  line-height: 40px;
  margin: 10px 0;
}
.content .el-col-24{
  color: #909399;
  line-height: 40px;
  margin: 10px 0;
}
.bg-purple .el-input {
  width: 150px;
}
.grid-content {
  text-align: left;
}
.navtop {
  position: absolute;
  top: 30px;
  left: 0;
  padding-left: 50px;
  right: 15px;
  background: #f0f0f0;
  z-index: 10;
  padding-top: 10px;
}
.form_wrap {
  padding: 50px 0;
}
.footerconfirm {
  position: absolute;
  top: 25px;
  text-align: right;
  /* background: #f0f0f0; */
  padding: 10px;
  z-index: 11;
  /* width: 300px; */
  right: 0;
  padding-right: 70px;
}
.clearfix:after {
  content: " ";
  display: block;
  line-height: 0;
  height: 0;
  visibility: hidden;
  clear: both;
}
.form3 {
  padding-bottom: 30px;
}
.el-collapse-item__header {
  text-align: center;
  background: #bfcbd9;
  height: 30px;
  margin-bottom: 10px;
  line-height: 30px;
}
.el-collapse-item__arrow {
  line-height: 30px;
}
.navtop .el-tabs__nav-wrap {
  padding-left: 25%;
}
.form5 .el-row {
  line-height: 40px;
  margin-bottom: 10px;
}
@media (max-width:1300px) and (min-width:1000px){
  .navtop .el-tabs__nav-wrap{padding-left: 15% !important;}
}
@media (max-width:1000px) {
  .navtop .el-tabs__nav-wrap{padding-left:0% !important;}
}
/* .form_wrap .el-col-6{margin: 10px 0; } */
.order_status{height: 75px;line-height: 75px;background: #3a3a3a;color: #ffffff;font-size: 20px;}
.add_order_status{background:rgba(25, 158, 216, 1);}
.caigouTop .el-col-6 {
    width: 25%;
    color: #909399;
    line-height: 40px;
    margin: 10px 0;
}
.order_footer{position: absolute;bottom: 0;left: 8px;right: 10px;}
#orderdetail{    padding-bottom: 110px;}
/* .add_order_status button{background: #ffffff;} */
.order_wrap span{color: #000;}
.order_header{
  position: absolute;
    top: 25px;
    text-align: right;
    padding: 10px;
    z-index: 11;
    right: 0;
    padding-right: 70px;}

</style>
